<template>
    <div class="app">
        <!--banner start-->
        <div class="apple-banner">
            <div class="bannerlist swiper-container">
                <div class="swiper-wrapper">
                    <div v-for="(item,index) in banners" :key="index" class="swiper-slide" :style="`background:url(${item.image}) center center ; background-size: cover;`">
                    </div>
                    <!-- <div class="swiper-slide slide3">
                        <img src="@/assets/images/banner.png" />
                    </div>-->
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="cplx">
            <div class="cplx_content container">
                <li>
                    <a href="##">
                        <span>骨科系列</span>
                        <p>适用于骨髓缺损填补</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <span>医美整形</span>
                        <p>修补加固肌腱劳损</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <span>烧伤创面</span>
                        <p>皮质骨经过脱钙处理</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <span>口腔系列</span>
                        <p>可满足临床需求</p>
                    </a>
                </li>
            </div>
        </div>
        <!--banner end-->
        <!-- 关于鑫康辰 -->
        <div class="about">
            <div class="about_content container">
                <div class="about_left">
                    <div class="icon_about">
                        <img :src="about.company_icon" />
                    </div>
                    <div class="about_text_content">
                        <div class="about_title">
                            <div>
                                {{ about.company_about }}
                            </div>
                            <div class="about_sub_title">
                                {{ about.company_name }}
                            </div>
                        </div>
                        <div class="about_content_detail">
                            {{ about.company_desc }}
                        </div>
                        <div ref="countA" class="about_nav">
                            <div class="about_nav_list">
                                <div class="item"><span class="company_born">{{ about.company_born }}</span><span>年</span></div>
                                <p>公司成立</p>
                            </div>
                            <div class="about_nav_list">
                                <div class="item">
                                    <CountTo separator="" :startVal="info.a.startVal" :endVal='Number(info.a.endVal)' :duration='info.a.duration' />
                                    <span>项</span>
                                </div>
                                <!-- <div class="item">{{ about.company_patent }}<span>项</span></div> -->
                                <p>授权专利</p>
                            </div>
                            <div class="about_nav_list">
                                <div class="item">
                                    <CountTo separator="" :startVal="info.b.startVal" :endVal='Number(info.b.endVal)' :duration='info.b.duration' />
                                    <span>种</span></div>
                                <p>各种荣誉</p>
                            </div>
                            <div class="about_nav_list">
                                <div class="item">
                                    <CountTo separator="" :startVal="info.c.startVal" :endVal='Number(info.c.endVal)' :duration='info.c.duration' />
                                    <span>人</span></div>
                                <p>公司在职员工</p>
                            </div>
                        </div>
                        <div class="liaojie">
                            <span>了解鑫康辰</span>
                            <img src="@/assets/images/more.png" />
                        </div>
                    </div>
                </div>
                <div class="about_right">
                    <!-- 后续替换成视频 -->   
                    <img :src="about.company_advert" />
                </div>
                <div class="clearboth"></div>
            </div>
        </div>
        <!-- 关于鑫康辰结束 -->
        <!-- 产品中心 -->
        <div class="product">
            <div class="product_content container">
                <div class="product_title">产品中心</div>
                <div class="product_sub_title">致力于打造最优质的产品，真诚的对待每一个客户</div>
                <div class="product_view">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="developlist swiper-container">
                    <div class="swiper-wrapper">
                        
                        <div v-for="(item,index) in products" :key="index" class="swiper-slide product_list">
                            <nuxt-link :to="'/products/prod/' + item.id">
                                <div class="product_list_pic">
                                <img :src="item.image" /></div>
                                <div class="product_list_title">{{ item.title }}</div>
                                <div class="product_list_desc">{{ item.description }}</div>
                                <div class="product_list_more">
                                    <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </nuxt-link>
                        </div>
                    
                    <!-- <div class="swiper-slide product_list">
                        <div class="product_list_pic">
                        <img src="@/assets/images/product1.png" />
                        </div>
                        <div class="product_list_title">同种异体肌腱</div>
                        <div class="product_list_desc">新鲜取材，最大限度保留肌腱组织原有空间结构，不引起免疫排斥反应；保证肌腱组织的生物力学强度。</div>
                        <div class="product_list_more">
                        <div>了解详情</div>
                        <div>
                            <img src="@/assets/images/more.png" /></div>
                        </div>
                    </div>
                    <div class="swiper-slide product_list">
                        <div class="product_list_pic">
                        <img src="@/assets/images/product1.png" /></div>
                        <div class="product_list_title">同种异体肌腱</div>
                        <div class="product_list_desc">新鲜取材，最大限度保留肌腱组织原有空间结构，不引起免疫排斥反应；保证肌腱组织的生物力学强度。</div>
                        <div class="product_list_more">
                        <div>了解详情</div>
                        <div>
                            <img src="@/assets/images/more.png" /></div>
                        </div>
                    </div>
                    <div class="swiper-slide product_list">
                        <div class="product_list_pic">
                        <img src="@/assets/images/product1.png" /></div>
                        <div class="product_list_title">同种异体肌腱</div>
                        <div class="product_list_desc">新鲜取材，最大限度保留肌腱组织原有空间结构，不引起免疫排斥反应；保证肌腱组织的生物力学强度。</div>
                        <div class="product_list_more">
                        <div>了解详情</div>
                        <div>
                            <img src="@/assets/images/more.png" /></div>
                        </div>
                    </div>
                    <div class="swiper-slide product_list">
                        <div class="product_list_pic">
                        <img src="@/assets/images/product1.png" /></div>
                        <div class="product_list_title">同种异体肌腱</div>
                        <div class="product_list_desc">新鲜取材，最大限度保留肌腱组织原有空间结构，不引起免疫排斥反应；保证肌腱组织的生物力学强度。</div>
                        <div class="product_list_more">
                        <div>了解详情</div>
                        <div>
                            <img src="@/assets/images/more.png" /></div>
                        </div>
                    </div>
                    <div class="swiper-slide product_list">
                        <div class="product_list_pic">
                        <img src="@/assets/images/product1.png" /></div>
                        <div class="product_list_title">同种异体肌腱</div>
                        <div class="product_list_desc">新鲜取材，最大限度保留肌腱组织原有空间结构，不引起免疫排斥反应；保证肌腱组织的生物力学强度。</div>
                        <div class="product_list_more">
                        <div>了解详情</div>
                        <div>
                            <img src="@/assets/images/more.png" /></div>
                        </div>
                    </div>
                    <div class="swiper-slide product_list">
                        <div class="product_list_pic">
                        <img src="@/assets/images/product1.png" /></div>
                        <div class="product_list_title">同种异体肌腱</div>
                        <div class="product_list_desc">新鲜取材，最大限度保留肌腱组织原有空间结构，不引起免疫排斥反应；保证肌腱组织的生物力学强度。</div>
                        <div class="product_list_more">
                        <div>了解详情</div>
                        <div>
                            <img src="@/assets/images/more.png" /></div>
                        </div>
                    </div>
                    <div class="swiper-slide product_list">
                        <div class="product_list_pic">
                        <img src="@/assets/images/product1.png" /></div>
                        <div class="product_list_title">同种异体肌腱</div>
                        <div class="product_list_desc">新鲜取材，最大限度保留肌腱组织原有空间结构，不引起免疫排斥反应；保证肌腱组织的生物力学强度。</div>
                        <div class="product_list_more">
                        <div>了解详情</div>
                        <div>
                            <img src="@/assets/images/more.png" /></div>
                        </div>
                    </div> -->
                    </div>
                </div>
            </div>
        </div>
        </div>
        <!-- 调查问卷 -->
        <div class="diaocha">
            <div class="diaocha_content container">
                <div class="diaocha_left">
                <div class="diaocha_title">鑫康辰为您提供品质健康的生活</div>
                <div class="diaocha_sub_title">传递博爱精神，温暖社会，创造社会价值</div>
                </div>
                <div class="diaocha_button">
                <a href="#">填写调查问卷</a>
                </div>
            </div>
        </div>
        <!-- 最新资讯 -->
        <div class="zixun">
            <div class="product_title">最新资讯</div>
            <div class="product_sub_title">脚踏实地，仰望星空，以全球视野、 瞄准行业高端谋划生物组织事业发展</div>
            <div class="zixun-view swiper-container">
                <div class="swiper-wrapper">
                    <!-- 列表开始  -->
                    <div v-for="(item,index) in news" :key="index" class="swiper-slide zixun-list">
                        <!-- <a  @click="GoHandler(item)" style="cursor:pointer;">
                            
                        </a> -->
                        <nuxt-link :to="'/news/' + item.id">
                            <div class="zixun-list-pic">
                                <img :src="item.image" />
                            </div>
                            <div class="zixun-img-bottom">
                                <div class="zixun-list-title">
                                    {{ item.title }}
                                    <span>{{ item.time }}</span>
                                </div>
                                <div class="zixun-list-desc dots-4">{{ item.desc }}</div>
                                <div class="zixun-list-more">
                                    <span>详情</span>
                                </div>
                            </div>
                        </nuxt-link>
                    </div>
                    <!-- 列表结束 -->
                </div>
                <div class="swiper-pagination"></div>
                <div class="jtkd">
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
        <!-- 右侧在线客服 -->
        
    </div>
</template>

<script>

import api from "@/api/news"
import common from "@/api/common"
import CountTo from 'vue-count-to' 
export default {
    name: "IndexPage",
    data() {
        return {
            banners:[],
            about:{},
            products:[],
            news:[],
            info:{ 
                a:{
                    startVal:Number(1),
                    duration:Number(3000),
                    endVal:Number(1),
                },
                b:{
                    startVal:Number(1),
                    duration:Number(3000),
                    endVal:Number(1),
                },
                c:{
                    startVal:Number(1),
                    duration:Number(3000),
                    endVal:Number(1),
                }
            } 
        }
    },
    components: {
        CountTo
    },
    mounted: function(){
        // banenr图切换
        new Swiper('.bannerlist', {
            observer: true,
            observeParents: true,
            autoplay: 3500,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
        });

        
        // this.$nextTick(function() {
        //     this.$confirm('您提交的订单支付有效期即将到期，请尽快处理。', '', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning',
        //         center: true
        //     }).then(() => {
        //         this.$message({
        //             type: 'success',
        //             message: '删除成功!'
        //     });
        //     }).catch(() => {
        //         this.$message({
        //             type: 'info',
        //             message: '已取消删除'
        //         });          
        //     });
        // })
    },
    methods:{
        swiperFun: function(){
            // 产品轮播
            var devepswiper = new Swiper('.developlist', {
                observer: true,
                observeParents: true,
                autoplay: 3500,
                slidesPerView: 4,
                spaceBetween: 40,
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next',
                breakpoints: {
                    768 : {
                    slidesPerView: 1,
                    spaceBetween: 10,
                    autoHeight: true,
                    },
                    1024 : {
                    slidesPerView: 2,
                    spaceBetween: 20,
                    },
                }
            });
        },
        horswiper:function(){
            // 资讯切换
            var horswiper = new Swiper('.zixun-view', {
                observer: true,
                observeParents: true,
                // autoplay: 3500,
                loop: false,
                slidesPerView: 5,
                spaceBetween: 40,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                speed: 600,
                pagination: '.zixun-view .swiper-pagination',
                prevButton: '.zixun-view .swiper-button-prev',
                nextButton: '.zixun-view .swiper-button-next',
                paginationClickable: true,
                autoplayDisableOnInteraction: false,
                breakpoints: {
                    768 : {
                    slidesPerView: 1,
                    spaceBetween: 10
                    },
                    1024 : {
                    slidesPerView: 2,
                    spaceBetween: 20
                    },
                }
            });
        },
        //初始化
        doLoadData(){
            this.initBanners();
            this.initAbout();
            this.initProducts();
            this.initNews();
        },
        initAbout:function(){
            let _this = this;
            common.GetAboutMe()
               .then(res => {
                    // console.log(res)
                    _this.about = res.data;
                });
        },
        //轮播图
        initBanners:function(){
            let _this = this;
            api.GetBannerList()
               .then(res => {
                    // console.log(res)
                    _this.banners = res.data;
                });
        },
        //产品中心
        initProducts:function(){
            let _this = this;
            api.GetProductList()
            .then(res => {
                    // console.log(res)
                    _this.products = res.data;
                    _this.$nextTick(() => {
                        _this.swiperFun();
                    })
                });
        },
        //新闻中心
        initNews:function(){
            let _this = this;
            api.GetNewList()
            .then(res => {
                    // console.log(res)
                    _this.news = res.data;
                    _this.$nextTick(() => {
                        _this.horswiper();
                    })
                });
        },
        // 跳转页面
        GoHandler:function(item){
            // 跳转页面 判断url是否拥有外部链接若有直接跳转外链
            // this.$router.push({
            //         path: `/news/show`,
            //         query: {id: item.id}
            //     })		

            this.$router.replace({
                path: `/news/${item.id}`,
            })
            return false
        },
        isInViewPort:function(element) {
            const viewWidth = window.innerWidth || document.documentElement.clientWidth;
            const viewHeight =
                window.innerHeight || document.documentElement.clientHeight;
            const { top, right, bottom, left } = element.getBoundingClientRect();
            return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
        }
    },
    created(){
        this.doLoadData();
        this.swiperFun();
        var _this = this;
        window.onscroll = function () {
            if (_this.$refs.countA == null) {
                return;
            }
            if (_this.isInViewPort(_this.$refs.countA)) {
                _this.info.a.endVal = Number(_this.about.company_patent)
                _this.info.b.endVal = Number(_this.about.company_honor)
                _this.info.c.endVal = Number(_this.about.company_staff)
            }
        };

    }
};
</script>
